<template>
  <div style="height:540px">
    <div class="fontWeight biaoti">企业佣金趋势图</div>
    <div class="flex flex-end mt20 mb55">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-form :model="queryParams" ref="queryForm" :inline="true">
          <el-form-item prop="companyAdminId">
            <el-select style="width:200px" v-model="queryParams.companyAdminId" class="mr10" placeholder="请选择客户企业" clearable filterable>
              <el-option
                v-for="dict in clientEnterpriseOptions"
                :key="dict.id"
                :label="dict.companyName"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="value1">
            <el-date-picker
            style="width:135px"
            v-model="queryParams.value1"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="开始日期"
            :picker-options="pickerOptions"
            >
            </el-date-picker>
        </el-form-item>
        <el-form-item>-</el-form-item>
          <!-- <span style="padding:7px 5px">-</span> -->
        <el-form-item prop="value2">
            <el-date-picker
            style="width:135px"
            v-model="queryParams.value2"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="handleQuery"
            >
            </el-date-picker>
        </el-form-item>
      </el-form>
    </el-col>
   </el-row>
   </div>
    <!-- <div :class="className" :style="{height:height,width:width}" /> -->
    <div style="height:380px;width:100%" id="myChart_line"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  // props: {
  //   className: {
  //     type: String,
  //     default: 'chart'
  //   },
  //   width: {
  //     type: String,
  //     default: '100%'
  //   },
  //   height: {
  //     type: String,
  //     default: '350px'
  //   },
  //   autoResize: {
  //     type: Boolean,
  //     default: true
  //   },
  //   chartData: {
  //     type: Object,
  //     required: true
  //   }
  // },
  data() {
    return {
      chart: null,
      // 查询参数
      queryParams: {
        companyAdminId: undefined,
        value1: undefined,
        value2: undefined,
      },
      pickerOptions: {
            disabledDate(time) {
                let curDate = (new Date()).getTime();
                let twelve = 365 * 24 * 3600 * 1000;
                let twelveMonths = curDate - twelve;
                return time.getTime() > Date.now() || time.getTime() < twelveMonths;
            }
      },
      clientEnterpriseOptions: [], // 所有客户企业下拉列表信息数据字典数据
    }
  },
  // watch: {
  //   chartData: {
  //     deep: true,
  //     handler(val) {
  //       this.setOptions(val)
  //     }
  //   }
  // },
  mounted() {
    this.$nextTick(() => {
      //this.initChart()
      this.getList()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  created() {
    this.getClientEnterprise().then(response => {
      this.clientEnterpriseOptions = response.data;
    });
  },
  methods: {
    getList() {
      // getCache(this.queryParams).then((response) => {
        
      // });  
      // this.loading = true;
      // listUser(this.queryParams).then(response => {
      //     this.userList = response.data.list;
      //     this.total = response.data.total;
      //     this.loading = false;
      //   });
       //this.chart = echarts.init(this.$el, 'macarons')
      this.chart = echarts.init(document.getElementById('myChart_line'), 'macarons')
      //this.setOptions(this.chartData)
      this.chart.setOption({
        title: {
          text: '单位：万',
          textStyle: {
              color: '#999',
              fontSize: '12'
          }
        },
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          boundaryGap: false,
          axisLabel: {
              show: true,
              textStyle: {
                  color: '#333'
              }
          },
          axisTick: {
            show: true,
            lineStyle: {
                color: '#d0d0d0'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
                color: '#d0d0d0'
            }
          }
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // Use axis to trigger tooltip
                type: 'none'        // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        yAxis: {
          axisLabel: {
              show: true,
              textStyle: {
                  color: '#333'
              }
          },
          splitLine: {
              show: true,
              lineStyle:{
                color: '#f0f0f0',
                width: 1,
                type: 'solid'
            }
      　　},
          splitArea: {
              show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        legend: {
          data: ['金额', '笔数'],
          icon:'rect',
          itemWidth: 22,  // 设置icon宽度
          itemHeight: 3, // 设置icon高度
          itemGap: 44, // 设置间距
          textStyle: {
            color: "#333"
         }
        },
        series: [{
          name: '金额', itemStyle: {
            normal: {
              color: '#045aff',
              lineStyle: {
                color: '#045aff',
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
          symbol: 'circle',
          // data: moneyData,
          data:[100, 120, 161, 134, 105, 160, 165],
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        },
        {
          name: '笔数',
          smooth: true,
          type: 'line',
          symbol: 'circle',
          itemStyle: {
            normal: {
              color: '#ee2750',
              lineStyle: {
                color: '#ee2750',
                width: 2
              }
              
            }
          },
          //data: countData,
          data: [120, 82, 91, 154, 162, 140, 145],
          animationDuration: 2800,
          animationEasing: 'quadraticOut'
        }]
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    // initChart() {
     
    // },
    // setOptions({ moneyData, countData } = {}) {
    //   this.chart.setOption({
        
    //   })
    // }
  }
}
</script>
